<template>
  <view class="box">
    <view v-if="lastItem" class="box1">
		<view class="top">
			<image src="/static/支付成功.png" class="logo"></image>
			<view>支付成功</view>
		</view>
		<view class="min">{{ lastItem.fx }}</view>
		<view class="min1">
			<view>{{lastItem.date}}</view>&nbsp;&nbsp;
			<view>{{ lastItem.num }}晚</view>
		</view>
		<view class="min2">查看订单</view>
    </view>
    <view class="btm">
		<button @click="index">返回首页</button>
	</view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';

const list = ref<any[]>([]);

const getlist = () => {
  uni.request({
    url: 'http://127.0.0.1:3000/ljy/gethshop',
    method: 'GET',
    success: (res: any) => {
      console.log(res.data.data);
      list.value = res.data.data;
    }
  });
};

const lastItem = computed(() => {
  return list.value[list.value.length - 1];
});

const index = () => {
  uni.reLaunch({
    url: '/pages/index/index'
  });
};

onMounted(() => {
  getlist();
});
</script>

<style lang="scss">
.box{
	height: 100vh;
	background-color: gainsboro;
	.box1{
		background-color: #fff;
		.top{
			padding-top: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.logo{
				width: 80rpx;
				height: 80rpx;
				padding-right: 20rpx;
			}
			view{
				font-size: 38rpx;
				font-weight: 600;
			}
		}
		.min{
			display: flex;
			justify-content: center;
			padding-left: 30rpx;
			margin: 20rpx;
			font-size: 38rpx;
			font-weight: 600;
		}
		.min1{
			display: flex;
			justify-content: center;
			font-size: 38rpx;
			font-weight: 600;
		}
		.min2{
			display: flex;
			justify-content: center;
			color:rgb(110,193,228);
			padding-top: 30rpx;
			padding-bottom: 15rpx;
		}
		
	}
	.btm{
		width: 96%;
		position: fixed;
		bottom: 10rpx;
		margin: 20rpx;
		button{
			background-color: rgb(0,111,246);
			color:white;
		}
	}
}
</style>